<template>
  <div>
    <div class="container">
      <h3>
        菜单管理
      </h3>
      <el-divider />
      <div class="handle-box">

      </div>
      <div class="handle-box">
        <el-button type="primary" size="small" :icon="Plus" @click="openDialog(null)">新增</el-button>
      </div>
      <el-table
          :data="tableInfo.records"
          style="width: 100%; margin-bottom: 20px"
          row-key="id"
          border
          default-expand-all
      >
        <el-table-column type="index" width="55" label="序号"/>
        <el-table-column type="index" width="55" label="图标" align="center">
          <template #default="scope">
            <el-icon size="20" align="center">
              <component :is="scope.row.icon"></component>
            </el-icon>
          </template>
        </el-table-column>
        <el-table-column  v-for="item in tableColumnData" :prop="item.prop"
                         :label="item.label" ></el-table-column>

        <el-table-column label="操作" width="200" align="center">
          <template #default="scope">
            <el-button type="warning" size="small" :icon="Edit" @click="openDialog(scope.row)">
              编辑
            </el-button>
            <el-button type="danger" size="small" :icon="Delete" @click="remove(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-dialog
          v-model="dialogInfo.visit"
          :title="dialogInfo.title"
          width="800"
      >
        <el-divider />
        <el-form :model="dialogInfo.form" label-width="auto" style="max-width: 600px">
          <el-form-item label="父菜单">
            <el-tree-select
                v-model="dialogInfo.form.parentId"
                :data="dialogInfo.treeMenuList"
                :render-after-expand="false"
                style="width: 240px"
            />
          </el-form-item>
          <el-form-item label="菜单名称">
            <el-input v-model="dialogInfo.form.title"/>
          </el-form-item>
          <el-form-item label="路由">
            <el-input v-model="dialogInfo.form.path"/>
          </el-form-item>
          <el-form-item label="排序">
            <el-input-number v-model="dialogInfo.form.sort"/>
          </el-form-item>
          <el-form-item label="图标">
            <ul class="infinite-list" style="overflow: auto">
              <el-segmented v-model="dialogInfo.form.icon" :options="items" v-for="items in options">
                <template #default="{ item }">
                  <div class="flex flex-col items-center gap-2 p-2">
                    <el-icon size="20">
                      <component :is="item" />
                    </el-icon>
                  </div>
                </template>
              </el-segmented>
            </ul>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogInfo.visit = false">取消</el-button>
            <el-button type="primary" @click="save">
              确认
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>

  </div>
</template>

<script setup lang="ts" name="basetable">
import {ref} from 'vue';
import {ElMessage, ElMessageBox} from 'element-plus';
import {Delete, Edit, Search, Plus} from '@element-plus/icons-vue';
import {getMenuList, removeMenu, saveMenu} from '@/api/menu'
import {iconArray} from "@/api/common";
import {saveUser} from "@/api/user";

const options = [];
 const generatorIcon = () => {
  for (let i = 0; i < iconArray.length; i += 12) {
    const chunk = iconArray.slice(i, i + 12);
    options.push(chunk);
  }
}
generatorIcon()
/**列表内容*/
const tableColumnData = ref([
  {
    prop:"hierarchy",
    label: "层级"
  },
  {
    prop: 'title',
    label: '菜单名'
  },

  {
    prop: 'path',
    label: '路由'
  },
  {
    prop: 'sort',
    label: '排序'
  }

])
/**列表信息*/
const tableInfo = ref(
    {
      username: '',
      records: []
    }
)

const dialogInfo = ref({
  visit: false,
  title: '',
  form: {
    id: '',
    title: '',
    path: '',
    icon: '',
    sort: '',
    parentId: ''
  },
  treeMenuList: []
})

const search = () => {
  getMenuList().then(res =>{
    dialogInfo.value.treeMenuList = []
    tableInfo.value.records = res.data
    tableInfo.value.records.forEach(e=>{
      var parentMenu = {
        value: e.id,
        label: e.title
      }
      dialogInfo.value.treeMenuList.push(parentMenu)
    })
  })
}


const reset = () => {
  console.log("重置")
  tableInfo.value.username = ''
  search()
}

const remove = (id: number) => {
  console.log("删除")
  ElMessageBox.confirm('确定要删除吗？', '提示', {
    type: 'warning'
  }).then(() => {
    removeMenu(id).then(res => {
      ElMessage.success("删除成功")
      search()
    })
  })
}

const openDialog = (data:Object) => {
  dialogInfo.value.title = '新增菜单'
  if (data != null) {
    dialogInfo.value.title = '修改菜单'
    dialogInfo.value.form = data
  }else{
    dialogInfo.value.form = {
      id: '',
      title: '',
      path: '',
      icon: '',
      sort: '',
      parentId: ''
    }
  }
  dialogInfo.value.visit = true
}

const save = () => {
  saveMenu(dialogInfo.value.form).then(res => {
    dialogInfo.value.visit = false
    ElMessage.success("操作成功")
    search()
    dialogInfo.value.form = {
      id: '',
      title: '',
      path: '',
      icon: '',
      sort: '',
      parentId: ''
    }
  })
}

/**
 * 页面初始化调用方法
 */
search()

</script>

<style scoped>
.tip-text {
  margin-bottom: 10px;
  color: #5a8cc4;
  font-size: 20px;
}

.dialog-box {
  width: 100%;
  height: 100%;
}

.dialog-image {
  float: left;
  width: 20%;
  height: 80%;
  margin-right: 30px;
}

.dialog-content {
  display: inline-block;
  width: 70%;
  height: 80%;
  background-color: #ffffff;
}


.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  background-color: #6C8CBF;
}

.handle-box {
  margin-bottom: 10px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 200px;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #F56C6C;
}

.mr10 {
  margin-right: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}

.avatar {
  width: 178px;
  height: 178px;
}

.el-upload {
  --el-upload-dragger-padding-vertical: 10px;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
.infinite-list {
  height: 300px;
  padding: 0;
  margin: 0;
}
.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: var(--el-color-primary-light-9);
  margin: 10px;
  color: var(--el-color-primary);
}
.infinite-list .infinite-list-item + .list-item {
  margin-top: 10px;
}
</style>
